import React from 'react';
import { Card, Row, Col, Statistic } from 'antd';
import { ApiOutlined, CloudOutlined, DatabaseOutlined } from '@ant-design/icons';

interface ApiOverviewCardsProps {
    data: {
        totalApiCount: number;
        restApiCount: number;
        dubboApiCount: number;
        highFreqApiCount: number;
        mediumFreqApiCount: number;
        lowFreqApiCount: number;
        noCallApiCount: number;
        // 可选：僵尸API比例（暂无后端，先模拟）
        zombieApiRatio?: number;
    };
    loading: boolean;
    periodText?: string; // 当前选择的周期文本，如"近半年"、"近一年"
}

const ApiOverviewCards: React.FC<ApiOverviewCardsProps> = ({ data, loading, periodText }) => {
    // 直接使用传入的统计数据
    const totalApis = data.totalApiCount;
    const dubboCount = data.dubboApiCount;
    const restCount = data.restApiCount;

    const cardStyle = {
        borderRadius: '8px',
        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
        transition: 'all 0.3s ease',
    };

    return (
        <div style={{ marginBottom: '16px' }}>
            <Row gutter={[16, 16]}>
                {/* API总数 */}
                <Col xs={24} sm={12} md={8}>
                    <Card style={cardStyle} loading={loading}>
                        <Statistic
                            title={periodText ? `${periodText}新增API` : "API总数"}
                            value={totalApis}
                            prefix={<ApiOutlined style={{ color: '#1890ff' }} />}
                            valueStyle={{ color: '#1890ff' }}
                        />
                        {periodText && (
                            <div style={{ fontSize: '11px', color: '#999', marginTop: '4px' }}>
                                {periodText}内创建的API数量
                            </div>
                        )}
                    </Card>
                </Col>

                {/* DUBBO服务 */}
                <Col xs={24} sm={12} md={8}>
                    <Card style={cardStyle} loading={loading}>
                        <Statistic
                            title="DUBBO服务"
                            value={dubboCount}
                            prefix={<CloudOutlined style={{ color: '#52c41a' }} />}
                            valueStyle={{ color: '#52c41a' }}
                            suffix={totalApis > 0 ? `(${((dubboCount/totalApis)*100).toFixed(1)}%)` : ''}
                        />
                        {periodText && (
                            <div style={{ fontSize: '11px', color: '#999', marginTop: '4px' }}>
                                {periodText}内DUBBO API
                            </div>
                        )}
                    </Card>
                </Col>

                {/* REST服务 */}
                <Col xs={24} sm={12} md={8}>
                    <Card style={cardStyle} loading={loading}>
                        <Statistic
                            title="REST服务"
                            value={restCount}
                            prefix={<DatabaseOutlined style={{ color: '#fa8c16' }} />}
                            valueStyle={{ color: '#fa8c16' }}
                            suffix={totalApis > 0 ? `(${((restCount/totalApis)*100).toFixed(1)}%)` : ''}
                        />
                        {periodText && (
                            <div style={{ fontSize: '11px', color: '#999', marginTop: '4px' }}>
                                {periodText}内REST API
                            </div>
                        )}
                    </Card>
                </Col>
            </Row>
        </div>
    );
};

export default ApiOverviewCards;
